<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/view/include/taglib.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <link href="${project}/ds/css/styles.css" rel="stylesheet" />
    <link href="${project}/ds/lib/layui/css/layui.css" rel="stylesheet" />
    <link href="${project}/ds/lib/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
    <link href="${project}/ds/css/roomStyle.css" rel="stylesheet" />
	<style type="text/css">
	    form{height:auto; width: auto;}
	</style>
</head>
<body>
    <!--<div style="padding: 10px 20px;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-btn layui-btn-normal" onclick="openImg()">户型图</div>
            </div>
        </div>
    </div>-->
    <div id="imagelist">
        <input type="file" id="upfile" name="upfile" style="display:none" lay-ext="jpg" onchange="Upload()">
        <div style="width:270px;padding:10px; float:left;">
            <div class="layui-form-item" style="text-align: center;">
                <img id="wxlogin" src="" style="width: 250px; height: 140px; border:1px solid #ccc;" />
            </div>
            <div class="layui-word-aux" style="text-align: center;">750px*422px</div>
            <div class="layui-form-item" style="text-align:center;">
                <input type="button" id="wxloginfile" name="wxloginfile" value="登录图上传" onclick="UpLoadClick('wxlogin','登陆图')"/>
               <!--  <input type="button" value="删除" onclick="Delete('wxlogin','登录图')" /> -->
            </div>
        </div>
        <div style="width:270px;padding:10px; float:left;">
            <div class="layui-form-item" style="text-align: center;">
                <img id="wxlog" src="" style="width: 250px; height: 140px; border:1px solid #ccc;" />
            </div>
            <div class="layui-word-aux" style="text-align: center;">750px*422px</div>
            <div class="layui-form-item" style="text-align:center;">
                <input type="button" id="wxlogfile" name="wxlogfile" value="背景图上传" onclick="UpLoadClick('wxlog','背景图')"/>
               <!--  <input type="button" value="删除" onclick="Delete('wxlog','背景图')" /> -->
            </div>
        </div>
        <div style="width:270px;padding:10px; float:left;">
            <div class="layui-form-item" style="text-align: center;">
                <img id="planeimg" src="" style="width: 250px; height: 140px; border:1px solid #ccc;"/>
            </div>
            <div class="layui-word-aux" style="text-align: center;">750px*422px</div>
            <div class="layui-form-item" style="text-align:center;">
                <input type="button" id="planeimgfile" name="planeimgfile" value="规划图上传" onclick="UpLoadClick('planeimg','规划图')" />
               <!--  <input type="button" value="删除" onclick="Delete('planeimg','规划图')" /> -->
            </div>
        </div>
        <div style="width:140px;padding:10px; float:left;">
            <div class="layui-form-item" style="text-align: center;">
                <img id="yhgs" src="" style="width: 130px; height: 160px; border:1px solid #ccc;" />
            </div>
            <div class="layui-word-aux" style="text-align: center;">650px*800px</div>
            <div class="layui-form-item" style="text-align:center;">
                <input type="button" id="yhgsfile" name="yhgsfile" value="优惠公示上传" onclick="UpLoadClick('YHGS','YHGS')" />
                <!-- <input type="button" value="删除" onclick="Delete('YHGS','YHGS')" /> -->
            </div>
        </div>
    </div>
<script src="${project}/ds/lib/jquery/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script src="${project}/ds/js/ajaxfileupload.js" type="text/javascript"></script>
<script src="${project}/ds/lib/layui/layui.js" type="text/javascript"></script>
<script src="${project}/ds/js/XHD.js" type="text/javascript"></script>
<script type="text/javascript">
    var layer;
    var imagename = "";
    var image = "";
    var ImgPath = "http://47.99.137.243:8080";
    var ImgUploadPath = "http://122.228.248.78:19000";
    layui.use(['upload', 'layer'],
        function () {

            /*$.ajax({
                url: "/data/WebSocket.ashx",
                type: "post",
                dataType: "json",
                data: { Action: "connect", type: "Img" },
                async: false,
                success: function (data) {
                    var result = data.result;
                    if (result === "true") {
                        var json = data.json;
                        ImgPath = json.ip;
                        console.log(ImgPath);
                    }
                }
            });*/
            $("#wxlogin").attr("src", ImgPath + "/UpLoad/fy/登录图.jpg");
            $("#wxlog").attr("src", ImgPath + "/UpLoad/fy/背景图.jpg");
            $("#planeimg").attr("src", ImgPath + "/UpLoad/fy/规划图.jpg");
            $("#yhgs").attr("src", ImgPath + "/UpLoad/fy/YHGS.jpg");
           /* $.ajax({
                url: "/data/WebSocket.ashx",
                type: "post",
                dataType: "json",
                data: { Action: "connect", type: "ImgUpload" },
                async: false,
                success: function (data) {
                    var result = data.result;
                    if (result === "true") {
                        var json = data.json;
                        ImgUploadPath = json.ip;
                    }
                }
            });*/
            $.ajax({
                type: "GET",
                url: "/tupian/getPic", /* 注意后面的名字对应CS的方法名称 */
                //data: { Action: 'GetHouseModel' }, /* 注意参数的格式和名称 */
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    for (var i = 0; i < result.length; i++) {
                        var div1 = $('<div></div>');
                        div1.attr('class', 'layui-form-item');
                        div1.attr('style', 'text-align:center;');    
                        div1.html('<img id="image' + i + '" src="' + ImgPath + '/UpLoad/fy/' + result[i].D_HouseModel + '.jpg" style="width: 250px; height: 160px; border:1px solid #ccc;" />')
                        var div2 = $('<div></div>');
                        div2.attr('class', 'layui-word-aux');
                        div2.attr('style', 'text-align: center;');
                        div2.html("750px*480px");
                        var div3 = $('<div></div>');
                        div3.attr('class', 'layui-form-item');
                        div3.attr('style', 'text-align:center');
                        div3.html('<input type="button" id="add' + i + '" name="add' + i + '" value="' + result[i].D_HouseModel + '上传" onclick="UpLoadClick(' + "'image" + i + "'" + ",'" + result[i].D_HouseModel + "'" + ')" /> <input type="button" value="删除" onclick="Delete(' + "'image" + i + "'" + ",'" + result[i] + "'" + ')"/>');

                        var parentdiv = $('<div></div>');
                        parentdiv.attr('id', 'div' + i);                                       //给div设置id
                        parentdiv.attr('style', 'width:270px;padding:10px; float:left;');        //给div设置style
                        parentdiv.append(div1);
                        parentdiv.append(div2);
                        parentdiv.append(div3);
                        //var filename = result[i].guid;
                        //var url = result[i].url + filename;
                        //var id = result[i].id;

                        //$("#wxlog").attr("src", url);
                        $("#imagelist").append(parentdiv);
                    }

                }
            });
    //        //微信登录页面
    //        var wxlogfileoption = {
    //            elem: "#wxlogfile",
    //            title: "微信登录",
    //            url: "../data/UploadAnnex.ashx?Action=uploadImg&type=3",
    //            method: "post",
    //            type: "file",
    //            success: function(result) {
    //                if (result === "false") {
    //                    layer.msg("上传格式不正确", { icon: 2 });
    //                } else {
    //                    var path = result.json.file;
    //                    console.log(path);
    //                    $("#wxlog").attr("src", path);
    //                }
    //            }
    //        };
    //        //规划图
    //        var planeimgfileoption = {
    //            elem: "#planeimgfile",
    //            title: "规划图",
    //            url: "../data/UploadAnnex.ashx?Action=uploadImg&type=4",
    //            method: "post",
    //            type: "file",
    //            success: function (result) {
    //                if (result === "false") {
    //                    layer.msg("上传格式不正确", { icon: 2 });
    //                } else {
    //                    var path = result.json.file;
    //                    console.log(path);
    //                    $("#planeimg").attr("src", path);
    //                }
    //            }
    //        };
    //        layui.upload(wxlogfileoption);
    //        layui.upload(planeimgfileoption);
            layer = layui.layer;

    //        LoadWxLog();
        });
    
    //function LoadWxLog() {
    //    $.ajax({
    //        type: "GET",
    //        url: "../data/UploadAnnex.ashx", /* 注意后面的名字对应CS的方法名称 */
    //        data: { Action: 'getRoomImg', type: 3, rnd: Math.random() }, /* 注意参数的格式和名称 */
    //        contentType: "application/json; charset=utf-8",
    //        dataType: "json",
    //        success: function (result) {
    //            for (var i = 0; i < result.length; i++) {
    //                var filename = result[i].guid;
    //                var url = result[i].url + filename;
    //                var id = result[i].id;
                    
    //                $("#wxlog").attr("src", url);
    //            }
                
    //        }
    //    });
    //    $.ajax({
    //        type: "GET",
    //        url: "../data/UploadAnnex.ashx", /* 注意后面的名字对应CS的方法名称 */
    //        data: { Action: 'getRoomImg', type: 4, rnd: Math.random() }, /* 注意参数的格式和名称 */
    //        contentType: "application/json; charset=utf-8",
    //        dataType: "json",
    //        success: function (result) {
    //            for (var i = 0; i < result.length; i++) {
    //                var filename = result[i].guid;
    //                var url = result[i].url + filename;
    //                var id = result[i].id;

    //                $("#planeimg").attr("src", url);
    //            }

    //        }
    //    });
    //}

    function UpLoadClick(img,imgname) {
        imagename = imgname;
        image = img;
        $("#upfile").click();
    }

  /*   function Delete(img, imgname) {
        $.ajax({
            url:  ImgUploadPath + "/DeleteImage?Name=" + imgname,
            type: "Get",
            async: false,
            success: function (d) {
                if (d) {
                    $("#" + img).attr("src", $("#" + img).attr("src") + "?t=" + Math.random());
                }
            }
        });
    } */

    function Upload() {
    	var file = $("#upfile").get(0).files[0]; 
    	console.log(file.type);
    	if(file.type.indexOf("jpeg") ==-1){
    		layer.msg("仅支持jpg格式文件上传");
    		return;
    	}
        var fd = new FormData();
        fd.append("uploadName", file);
        fd.append("fileName",imagename);
        $.ajax({
            url: "/tupian/uploadImage",
            type: "POST",
            processData: false,
            contentType: false,
            data: fd,
            success: function (d) {
                console.log(d);
                console.log($("#" + image).attr("src"));
                $("#" + image).attr("src", $("#" + image).attr("src") + "?t=" + Math.random());
            }
        });
    }

    

    //打开户型图上传页面
  /*   function openImg() {
        layer.open({
            type: 2,
            title: '户型图管理',
            shadeClose: true,
            area: ['1200px', '600px'],
            content: '../Car/UploadRoomImg.html?type=1'
        });
    } */
</script>
</body>
</html>